<template>
  <div class="receiveRecord ">
    <!-- 查询 -->
    <search :hasName="true" :options="options" :has-labs="false" @search="onSearch" />

    <!-- 列表 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" label="序号" width="55" align="center" />
      <el-table-column prop="no" label="订单号" align="center"  width="210">
        <!-- <template slot-scope="scope">
          <span v-for="(item,i) in scope.row.store" :key="i">{{ item.name }}、</span>
        </template> -->
      </el-table-column>
      <el-table-column prop="createdAt" label="时间" align="center" />
      <!-- <el-table-column prop="num" label="申领种类" align="center" >
        <template slot-scope="scope">
          {{ scope.row.store&&scope.row.store.length }}
        </template>
      </el-table-column> -->
      <el-table-column prop="note" label="备注" align="center" show-overflow-tooltip/>
      <el-table-column prop="status" label="申领状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.status === 0" style="color: #f5bd41;">待审批</span>
          <span v-else-if="scope.row.status === 1" style="color: orange;">审批中</span>
          <span v-else-if="scope.row.status === 2" style="color: #5fcb71;">待领用</span>
          <span v-else-if="scope.row.status === 5" style="color: #909299">已领用</span>
          <span v-else-if="scope.row.status === 3" style="color: #eb5851;">未通过</span>
          <!-- <span v-else-if="scope.row.status === 6" style="color: #909299;">已归还</span> -->
          <span v-else style="color: #448ef7;">已取消</span>

        </template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <div style="display: flex; justify-content: center;">
          <el-button
            class="btnWidth"
            type="primary"
            size="mini"
            @click="toMore(scope.row)"
          >详情</el-button>
          <el-button
            v-if="scope.row.status === 0||scope.row.status === 1"
            class="btnWidth"
            type="info"
            size="mini"
            @click="handleEdit(scope.row,'cancel')"
          >取消</el-button>
          <el-button
            v-else-if="scope.row.status === 2"
            class="btnWidth"
            type="success"
            size="mini"
            @click="handleEdit(scope.row,'get')"
          >领用</el-button>
          <!-- <el-button
          class="btnWidth"
            v-else-if="scope.row.status === 5"
            type="warning"
            size="mini"
            @click="handleEdit(scope.row,'back')"
          >归还</el-button> -->
          <el-button
            v-else
            class="btnWidth"
            type="danger"
            size="mini"
            @click="handleEdit(scope.row,'del')"
          >删除</el-button>
        </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination  :currentPage="currentPage" :total="total" @changCurrentPage="changCurrentPage" />

    <!-- 详情弹框 -->
    <moreDialog v-if="isShowMore" :info="currentMore" :more-dialog="isShowMore" @close="isShowMore =false" />
    <!-- 归还弹框 -->
    <backDialog v-if="isShowBack" :info="currentBack" :showback="isShowBack" @close="isShowBack=false"/>
    <!-- 领用弹框 -->
    <getDialog v-if="isShowGet" :show-get="isShowGet" :info="currentMore" @close="isShowGet=false"/>
  </div>
</template>

<script>
import { getAuditPersonalListAPI,cancelReveiveAPI ,delReveiveAPI} from '@/api/web/hjUser.js'
import moreDialog from './components/moreDialog.vue'
import search from '../components/search.vue'
import pagination from '../components/pagination.vue'
import { mapState } from 'vuex'
import backDialog from './components/backDialog.vue'
import getDialog from './components/getDialog.vue'
export default {
  components: {
    search,
    pagination,
    moreDialog,
    backDialog,
    getDialog
  },
  data() {
    return {
      options: [
        {
          label: '待审批',
          value: 0
        },
        {
          label: '审批中',
          value: 1
        },
        {
          label: '待领用',
          value: 2
        },
        {
          label: '未通过',
          value: 3
        },
        {
          label: '已取消',
          value: 4
        },
        {
          label: '已领用',
          value: 5
        },
        // {
        //   label: '已归还',
        //   value: 6
        // }
      ],
      tableData: [],
      isShowMore: false,
      currentMore: '',
      currentBack:'',
      total:0,
      searchStatus:'',
      searchName:'',
      isShowBack:false,
      isShowGet:false,
      currentPage:1
    }
  },
  created() {
    this.getAuditPersonalList({
      status: '',
      id: this.searchId
    })
  },
  computed: {
    ...mapState('hjuser', ['searchId'])
  },
  methods: {
    async getAuditPersonalList(params,page=0) {
      const {content,totalElements} = await getAuditPersonalListAPI(params,page)
      this.tableData =content
      this.total = totalElements
      this.$store.commit('hjuser/updatedsearchId', '')
    },
   async handleEdit(row, type) {
      if (type === 'cancel') {
         try {
          await cancelReveiveAPI(row.id)
          row.status = 4
          this.$message.success('操作成功')
         } catch (error) {
           this.$message.success('操作失败')
         }
      }else if (type === 'back'){
         this.isShowBack = true
         this.currentBack =row
      }else if (type === 'get'){
        this.isShowGet = true
        this.currentMore = row
      } else {
        try{
          await delReveiveAPI(row.id)
          this.getAuditPersonalList({
           status: '',
           id: this.searchId
          })
          this.$message.success('操作成功')
          this.currentPage =1
        }catch {
          this.$message.success('操作失败')
        }
      }
    },
    onSearch(input, lab, status) {
      this.searchStatus = status
      this.searchName = input
      this.getAuditPersonalList({
        status,
        data: input,
        id: this.searchId
      })
    },
    changCurrentPage(page) {
      this.currentPage = page
      this.getAuditPersonalList({
        status:this.searchStatus,
        data: this.searchName,
      }, page-1)
    },
    toMore(row) {
      this.isShowMore = true
      this.currentMore = row
    }
  }
}
</script>

<style scoped lang="scss">
.receiveRecord {
  & .el-table ::v-deep {
    .el-table__cell {
      padding: 17px 0;
    }
  }
  .el-table--small{
    font-size: 16px;
  }
  .pagination {
  text-align: right;
  padding: 25px 0 0;
}
&::v-deep .el-pagination.is-background .btn-prev,
&::v-deep .el-pagination.is-background .btn-next,
&::v-deep .el-pagination.is-background .el-pager li,
&::v-deep .el-pagination__total {
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
}
&::v-deep .el-pagination__total {
  width: unset;
}
}

.btnWidth {
  padding: 7px 8px;
  height: 35px;
  font-size: 16px;
}
</style>
